import React, { useEffect, useState } from 'react';
import { Loading } from '@alifd/next';
import { observer } from 'mobx-react-lite';
import { Chart, Tooltip, Point, Line, Legend, Interval } from 'bizcharts'; // 导入 Point 组件
import { useStore } from '@/hooks';
import styles from './AssetColumnChart.module.scss';
import { toJS } from 'mobx';
import moment from 'dayjs';
import { t } from '@lingui/macro';
import ChartRangePicker from './ChartRangePicker';

const scale = {
  count: {
    min: 0,
    tickCount: 4,
    alias: t`订单`,
    type: 'linear-strict',
  },
  priceSum: {
    min: 0,
    tickCount: 4,
    alias: t`金额`,
    type: 'linear-strict',
  },
};
const colors = ['#6394f9', '#62daaa'];

function AssetColumnChart() {
  const { dashboardStore: store } = useStore();
  const { queryCC, queryST, loading } = store;

  useEffect(() => {
    (async () => {
      await store.fetchCC();
      await store.fetchST();
    })();
  }, []);

  const handleOnDateCC = (v) => {
    if (v[0] && v[1]) {
      const from = moment(v[0]).format('YYYY-MM-DD');
      const to = moment(v[1]).format('YYYY-MM-DD');
      store.fetchCC({ from, to });
    } else {
      queryCC.from = '';
      queryCC.to = '';
      store.fetchCC();
    }
  };

  const handleOnDateST = (v) => {
    if (v[0] && v[1]) {
      const from = moment(v[0]).format('YYYY-MM-DD');
      const to = moment(v[1]).format('YYYY-MM-DD');
      store.fetchST({ from, to });
    } else {
      queryST.from = '';
      queryST.to = '';
      store.fetchST();
    }
  };

  let chartIns = null;

  return (
    <div className={global.isAdmin ? styles.admin_assetColumnChart : styles.assetColumnChart} >
      <Loading visible={loading.cc}>
        <ChartRangePicker text="包车订单增长趋势图" handleOnChange={(e) => handleOnDateCC(e)} prises={toJS(store.ccOrder)} />
        <Chart
          scale={scale}
          autoFit
          height={400}
          data={toJS(store.ccOrder)}
          onGetG2Instance={(chart) => {
            chartIns = chart;
          }}
        >
          <Legend
            custom
            allowAllCanceled
            items={[
              {
                value: 'priceSum',
                name: '金额',
                marker: {
                  symbol: 'square',
                  style: { fill: colors[0], r: 5 },
                },
              },
              {
                value: 'count',
                name: '订单',
                marker: {
                  symbol: 'hyphen',
                  style: { stroke: colors[1], r: 5, lineWidth: 3 },
                },
              },
            ]}
            onChange={(ev) => {
              const { item } = ev;
              const { value } = item;
              const checked = !item.unchecked;
              const geoms = chartIns.geometries;

              for (let i = 0; i < geoms.length; i++) {
                const geom = geoms[i];

                if (geom.getYScale().field === value) {
                  if (checked) {
                    geom.show();
                  } else {
                    geom.hide();
                  }
                }
              }
            }}
          />
          <Tooltip shared />
          <Interval
            position="date*priceSum"
            color={colors[0]}
            size={9}
            style={{ lineWidth: 2 }}
          />
          <Line
            position="date*count"
            color={colors[1]}
            size={3}
            shape="smooth"
          />
          <Point
            position="date*count"
            color={colors[1]}
            size={3}
            shape="circle"
          />
        </Chart>
      </Loading>

      {global.isAdmin &&
        <Loading visible={loading.st}>
          <ChartRangePicker text="专线订单增长趋势图" handleOnChange={(e) => handleOnDateST(e)} prises={toJS(store.shuttleOrder)} />
          <Chart
            scale={scale}
            autoFit
            height={400}
            data={toJS(store.shuttleOrder)}
            onGetG2Instance={(chart) => {
              chartIns = chart;
            }}
          >
            <Legend
              custom
              allowAllCanceled
              items={[
                {
                  value: 'priceSum',
                  name: '金额',
                  marker: {
                    symbol: 'square',
                    style: { fill: colors[0], r: 5 },
                  },
                },
                {
                  value: 'count',
                  name: '订单',
                  marker: {
                    symbol: 'hyphen',
                    style: { stroke: colors[1], r: 5, lineWidth: 3 },
                  },
                },
              ]}
              onChange={(ev) => {
                const { item } = ev;
                const { value } = item;
                const checked = !item.unchecked;
                const geoms = chartIns.geometries;

                for (let i = 0; i < geoms.length; i++) {
                  const geom = geoms[i];

                  if (geom.getYScale().field === value) {
                    if (checked) {
                      geom.show();
                    } else {
                      geom.hide();
                    }
                  }
                }
              }}
            />
            <Tooltip shared />
            <Interval
              position="date*priceSum"
              color={colors[0]}
              size={9}
              style={{ lineWidth: 2 }}
            />
            <Line
              position="date*count"
              color={colors[1]}
              size={3}
              shape="smooth"
            />
            <Point
              position="date*count"
              color={colors[1]}
              size={3}
              shape="circle"
            />
          </Chart>
        </Loading>}
    </div>
  );
}

export default observer(AssetColumnChart);
